<template>
	<div class="shopCar-container">
		<div class="card-list">
			<div class="mui-card">
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<div class="card-content">
								<mt-switch ></mt-switch>
								<img src="//img10.360buyimg.com/mobilecms/s405x405_jfs/t18157/222/1822300674/231514/6c179af8/5ad87390N086a3c91.jpg!q70.dpg.webp" alt="">
								<div class="card-info">
									<h4>荣耀10  GT游戏加速 AIS手持夜景  6GB+64GB </h4>
									<p>
										<span class="price">￥2299</span>
										<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9' style="height: 25px;">
											<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
											<input id="test" class="mui-input-numbox" type="number" value="1" readonly />
											<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
										</div>
										<a href="#">删除</a>
									</p>
								</div>
							</div>
						</div>
					</div>
			</div>
			
			<div class="mui-card">
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<div class="card-content">
								<mt-switch ></mt-switch>
								<img src="//img10.360buyimg.com/mobilecms/s405x405_jfs/t18157/222/1822300674/231514/6c179af8/5ad87390N086a3c91.jpg!q70.dpg.webp" alt="">
								<div class="card-info">
									<h4>荣耀10  GT游戏加速 AIS手持夜景  6GB+64GB </h4>
									<p>
										<span class="price">￥2299</span>
										<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9' style="height: 25px;">
											<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
											<input id="test" class="mui-input-numbox" type="number" value="1" readonly />
											<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
										</div>
										<a href="#">删除</a>
									</p>
								</div>
							</div>
						</div>
					</div>
			</div>
			
			<div class="mui-card">
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<div class="card-content">
								<mt-switch ></mt-switch>
								<img src="//img10.360buyimg.com/mobilecms/s405x405_jfs/t18157/222/1822300674/231514/6c179af8/5ad87390N086a3c91.jpg!q70.dpg.webp" alt="">
								<div class="card-info">
									<h4>荣耀10  GT游戏加速 AIS手持夜景  6GB+64GB </h4>
									<p>
										<span class="price">￥2299</span>
										<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9' style="height: 25px;">
											<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
											<input id="test" class="mui-input-numbox" type="number" value="1" readonly />
											<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
										</div>
										<a href="#">删除</a>
									</p>
								</div>
							</div>
						</div>
					</div>
			</div>
		</div>
		<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div class="card-foot">
							<div class="card-left">
								<p>总计（不含运费）</p>
								<p>以勾选商品<span style="color: red;font-weight: 600;">？</span>件，总价<span style="color: red;font-weight: 600;">￥0</span></p>
							</div>
							<mt-button type="danger">去结算</mt-button>
						</div>
					</div>
				</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default {
		data(){
			return{
				ids: [],
				shopCarInfo: []
			}
		},
		methods: {
			getShopCar(){
				// 获取所有商品的id
				this.$store.state.car.forEach(item=>{
					this.ids.push(item.id);
				})
				if (this.ids == []) {
					return;
				} else {
					this.ids = this.ids.join(',');
				}
				this.$http.get(`api/goods/getshopcarlist/${this.ids}`).then(res=>{
						if (res.body.status == 0) {
							this.shopCarInfo = res.body.message;
						} else {
							Toast('获取数据失败！');
						}
				})
			}
		},
		created:function(){
			this.getShopCar();
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.card-content{
		display: flex;
		img{
			width: 60px;
			height: 100%;
		}
		.card-info{
			display: flex;
			flex-wrap: wrap;
			padding: 0px 3px;
			h4{
				font-size: 12px;
			}
			.price{
				font-size: 14px;
				font-weight: 500;
				color: red;
				padding: 0px 10px;
			}
			a{
				padding: 0px 10px;
				line-height: 23px;
			}
		}
	}
	.card-foot{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
